<template>
    <div class="prize-topic">
        <video-swiper-panorama
            v-if="false && videoSwiperPanorama && Object.keys(videoSwiperPanorama).length > 0"
            @appraiseShowFn="appraiseShowFn"
            :videoSwiperPanoramaPorps="videoSwiperPanorama"
        ></video-swiper-panorama>
        <slide-bottom
            ref="topicBox"
            @closeSlideBottom="$emit('showAppraise')"
        >
            <div
                class="prize-topic-box width-height-full"
                v-if="prizeTopic && Object.keys(prizeTopic).length > 0"
            >
                <scroller
                    ref="myscroller"
                    :on-refresh="refresh"
                    :on-infinite="infinite"
                >
                    <div class="prize-topic-cbox">
                        <div class="pirze-topic">
                            <topic-header
                                @ruleShow="actRule = true"
                                :topicHeaderProp="prizeTopic"
                            ></topic-header>
                            <div
                                class="swiper-center-wbig positionR"
                                v-if="prizeTopic.actState == 1 || prizeTopic.actState == -1 || prizeTopic.actState == -2 || prizeTopic.actState == 0"
                            >
                                <swiper-center-big
                                    v-if="swiperContent && swiperContent.list.length > 0"
                                    @clickSwiperItem="showBigSiper"
                                    @changeIndex="swiperIndex"
                                    :SwiperContentProp="swiperContent"
                                >
                                </swiper-center-big>
                                <span
                                    class="discription-img"
                                    v-for="(swiperContentValue,swiperContentIndex) in swiperContent.list"
                                    v-if="showSwiperPrizeStep == swiperContentIndex"
                                >{{swiperContentValue.title}}</span>
                            </div>
                            <!--领取大奖-->
                            <!--中奖，未领取-->
                            <div v-else-if="prizeTopic.actState == 2 && prizeTopic.awarded && prizeTopic.myReward && !prizeTopic.received">
                                <div class="prize-wmark positionR">
                                    <img
                                        class="prize-mark"
                                        :src="staticImageUrl('images/prizeTopic/get_prize_header.png')"
                                        alt=""
                                    >
                                    <div class="positionR prize-wimg">
                                        <div v-if="prizeTopic.myReward.mediaType == 1">
                                            <img
                                                class="prize-img"
                                                :src="prizeTopic.myReward.mediaContents[0].url"
                                                alt=""
                                            >
                                        </div>
                                        <div v-if="prizeTopic.myReward.mediaType == 0">
                                            <video
                                                ref="video"
                                                id="myVideo"
                                                class="js_myVideo myVideo prize-img"
                                                :x5-playsinline="isIphone"
                                                :playsinline="isIphone"
                                                webkit-playsinline="true"
                                                x-webkit-airplay="true"
                                                preload
                                                loop="loop"
                                                :poster="''"
                                                :autoplay="false"
                                                :x5-video-player-type="isIphone ? false : 'h5'"
                                                :video-player-type="isIphone ? false : 'h5'"
                                                :x5-video-player-fullscreen='isIphone ? false : true'
                                                controls="controls"
                                                x5-video-ignore-metadata='true'
                                                x5-video-orientation="portraint"
                                                video-orentation="portraint"
                                            >
                                                <source
                                                    :src="prizeTopic.myReward.mediaContents[0].url"
                                                    type='video/mp4'
                                                >
                                                您的浏览器不支持 video 标签。
                                            </video>
                                        </div>
                                        <span
                                            class="prize-mark-text"
                                            v-if="prizeTopic.myReward.rewardLevel"
                                        >{{prizeStep(prizeTopic.myReward.rewardLevel)}}</span>
                                    </div>
                                    <p
                                        class="prize-inform"
                                        v-if="prizeTopic.myReward.awardTitle"
                                    >恭喜你</p>
                                    <p
                                        class="prize-inform"
                                        v-if="prizeTopic.myReward.awardTitle"
                                    >{{prizeTopic.myReward.awardTitle}}</p>
                                </div>
                                <div
                                    class="get-prize-wbtn"
                                    v-if="!prizeTopic.received"
                                >
                                    <span
                                        class="get-prize-btn"
                                        @click="getPrizeBtn(prizeTopic.myReward)"
                                    >领取大奖</span>
                                </div>
                                <div
                                    class="get-prize-wbtn"
                                    v-else-if="prizeTopic.received"
                                >
                                    <span class="get-prize-btn disabled">已领取</span>
                                </div>
                                <!--<div class="get-prize-wbtn" v-else-if="systemStyle != 5">-->
                                <!--<span class="get-prize-btn" @click="toHaoKanHaoWan">App内领取大奖</span>-->
                                <!--</div>-->
                            </div>
                        </div>
                        <!--<div class="get-prize-wbtn" v-else-if="systemStyle != 5">-->
                        <!--<span class="get-prize-btn" @click="toHaoKanHaoWan">下载好看好玩赢大奖</span>-->
                        <!--</div>-->
                        <!--我的活动-->
                        <div
                            class="self-goods-wbox"
                            :class="{'already-finish':prizeTopic.actState == 2}"
                            v-if="Array.isArray(selfWorks.list) && selfWorks.list.length > 0"
                        >
                            <goods-box
                                :goodsBoxsProp="selfWorks"
                                @doLike="doLike"
                                @titleRightBtn="titleRightBtn"
                            ></goods-box>
                        </div>
                        <div
                            v-if="Array.isArray(works.list) && works.list.length > 0"
                            class="goods-wbox"
                        >
                            <goods-box
                                :goodsBoxsProp="works"
                                @doLike="doLike"
                            ></goods-box>
                        </div>
                        <div v-else>
                            <no-data :noDataProps="noData"></no-data>
                        </div>
                    </div>
                </scroller>
            </div>
        </slide-bottom>
        <!--未参与且已经开始-->
        <div
            class="text-center join-wrap"
            v-if="prizeTopic && prizeTopic.actState == 0"
        >
            <span
                class="join-btn"
                v-if="!prizeTopic.hadJoin"
                @click="joinPrize()"
            >
                <img
                    class="join-icon"
                    src="../../../assets/images/prizeTopic/camara_icon.png"
                    alt=""
                >
                参加拿大奖
            </span>
        </div>
        <div
            class="text-center join-wrap change-work-btn"
            v-else
        >
            <span
                class="join-btn"
                @click="editWorks"
            >
                <img
                    class="join-icon"
                    src="../../../assets/images/prizeTopic/refresh_icon.png"
                    alt=""
                >
                更换作品
            </span>
        </div>
        <!--活动规则-->
        <div class="appraise-rule">
            <act-rule
                v-if="actRule"
                :ruleProp="ruleMsg"
                @closeRule="actRule=false"
            ></act-rule>
        </div>
        <div class="share-box">
            <v-share
                v-if="showShare"
                @clickFn="showShare = false"
            ></v-share>
        </div>
        <!--放大的预览轮播图-->
        <div
            class="full-height-swiper-wrap"
            v-if="swiperShow"
        >
            <div class="positionR">
                <full-height-swiper
                    :FHSwiperMsg="{imagesList:bigSwiperList,useSwiperPagination:true,closeBtn: true}"
                    @close="hideBigSiper"
                    @clickSwiperItem="hideBigSiper"
                >
                </full-height-swiper>
            </div>
        </div>
        <!--二维码-->
        <div class="static-img-alert-wrap">
            <static-img-alert
                @navagation="navagation"
                :rqCodeContentProp="appraiseCode"
                @closeCode="appraiseCode.show = false"
                v-if="appraiseCode.show"
            ></static-img-alert>
        </div>
        <!--侧边栏-->
        <div class="appraise-wshare">
            <span
                class="appraise-top"
                @click="appraiseToTop"
            >
                <img
                    :src="staticImageUrl('/images/prizeTopic/backTop.png')"
                    alt=""
                >
            </span>
        </div>
        <!--红包的领取-->
        <red-packet
            class="red-packet"
            ref="getRedAlert"
            v-if="getRedMsg.show"
            :getRedProps="getRedMsg"
            @openRedPage="openRedPage"
        ></red-packet>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import SwiperCenterBig from '../../../components/commonComponents/swiperComponent/SwiperCenterBig'
import GoodsBox from '../../../components/commonComponents/boxItem/GoodsBox';
export default {
    name: "PrizeTopic",
    props: {
        appraiseProp: Object,
    },
    data () {
        return {
            swiperContent: {
                list: [],
            },
            bigSwiperList: [],
            swiperShow: false,
            prizeTopicShow: false,
            showSwiperPrizeStep: 0,
            storeInfo: {},
            appraiseCode: {
                show: false,
            },
            getRedMsg: {
                show: false,
                title: '恭喜发财，大吉大利',
                redTypeState: 0,//红包种类//0、普通红包，1、加速红包，2、增长红包
                rule: [],//红包领取规则
                notNeedAction: true,
                myPacketInfo: {
                    receivedAmount: 10,//已领金额
                    welPacketId: 0,//红包ID
                    completeReceived: false,//
                    showReceivedAmount: false,//是否显示已领金额
                    canReceive: true,//是否领取按钮可点击
                    canReceiveAmount: 0,//可领金额（普通红包不显示）
                    lastTimeMillis: 0,//剩余时间毫秒数（助力红包才有用）
                    invitedNum: 0,//已经邀约人数
                    waitInvitedNum: 0,//待邀请人数（助力红包才有用）
                    packetHelpers: [{
                        userId: '',//帮助者用户id
                        photo: "",//帮助者头像
                        amount: ""//帮助者账号
                    }]
                },
            },
            prizeTopic: {
                //     "interactId": 621,
                //     "storeId": 421,
                //     "storeName": "奈雪",
                //     "logo": null,                                            //----店铺logo
                //     "title": "测试创建话题3",                               //----话题标题
                //     "content": "话题3",                                     //----话题描述
                //     "actState": 2,                                          //----活动状态
                //     "rule": "xxxxxx",                                       //----活动规则
                //     "interactType": 6,
                //     "mediaSourceKey": 1001,                               //----推广id
                //     "reward": true,
                //     "rewardPublished": true,                              //----是否发奖
                //     "rewardRule": {
                //         "startTime": 1576059001000,
                //             "endTime": 1567170654000,
                //             "interactId": 621,
                //             "content": "测试创建话题3",
                //             "mediaReward": true,
                //             "mediaRewards": [
                //             {
                //                 "id": 1,
                //                 "interactId": 621,
                //                 "rewardLevel": 0,
                //                 "awardType": 10,
                //                 "awardTitle": "测试话题3",
                //                 "awardKey": 477,
                //                 "awardNum": 10,
                //                 "photoUrl": null,
                //                 "mediaType": 1,
                //                 "mediaContents": [
                //                     {
                //                         "url": "https://oss.haokanhaowan.cn/files/ad_video/20191115_offline/01984361.mp4",
                //                         "size": [
                //                             60.5,
                //                             200.0,
                //                             16.0
                //                         ]
                //                     }
                //                 ],
                //                 "poster": "https://oss.haokanhaowan.cn/images/store/2019118_offline/06158491.jpg"
                //             }
                //         ],
                //             "answerReward": false,
                //             "answerRewardModels": null
                //     },
                //     "hadJoin": false,
                //     "winnersModels": null,
                //     "getReward": false,
                //     "hadJoin": false,                                                       //----是否参与过
                //     "selfTopicOpus": {                                                              //----本人作品
                //         "id": 4,
                //             "userId": 3097,
                //             "userName": "🚀 Lns",
                //             "photoUrl": "https://oss.pg.yibaotong.top/images/user/20191011_offline/30977156321.jpg",
                //             "interactId": 621,
                //             "mediaId": 2821,
                //             "mediaType": 1,
                //             "mediaContents": [
                //             {
                //                 "url": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/a2c3bb0505148c86bb56be6933a41614.webp",
                //                 "size": [
                //                     720.0,
                //                     1552.0
                //                 ]
                //             },
                //             {
                //                 "url": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/b56fd396967423d3e29139aa6d2a36c2.webp",
                //                 "size": [
                //                     120.0,
                //                     120.0
                //                 ]
                //             }
                //         ],
                //             "musicId": 53,
                //             "poster": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/a2c3bb0505148c86bb56be6933a41614.webp",
                //             "mediaComment": "",
                //             "likeNum": 0 ,                                  //----点赞数
                //         "rankNum": 123,                                //----排名
                //     },
                //     "shortToAdvanced": 0,                                                           //----与上一名点赞数之差（注意特殊处理第一名的情况）++20191226++
                //     "awarded": false,                                                               //----是否获奖
                //     "received": false,                                                              //----是否领奖
                //     "myReward": null,                                                               //----我的奖品
            },
            carrierId: 0,
            appraiseId: 0,
            noData: {
                text: '暂时没有参赛作品哦',
                imgUrl: this.staticImageUrl('/images/prizeTopic/no_works.png'),
            },
            /*活动规则*/
            ruleMsg: {},
            /*分享*/
            showShare: false,
            rule: {
                show: false,
            },
            videoSwiperPanorama: {
                // videoSwiperPanoramaPorps:{
                //     mediaType:0,/*0视屏,1图片,2全景图*/
                //     imagesList:[],
                //     videoUrl:'https://oss.yibaotong.top/files/ad_video/20191219_offline/01374891.mp4',
                //     imgUrl:'',
                // },
                // title:' #说说你喜欢的哪些青春校园励志剧#',
            },
            actRule: false,
            selfWorks: {
                title: "我的",/*@title works 标题*/
                id: 1,
                titleInfo: {
                    type: "oneLine",
                    leftText: "oneLine",
                    rightText: "oneLine",
                },/*@title goodsBoxs 标题*/
                isShowMore: false,/*@isShowMore 是否显示查看更多*/
                // list{
                // {
                //     storeId:0,
                //     type:1,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                //     itemId:0,//商品id
                //     id:0,//商品id
                //     currency:"￥",/*金币的符号*/
                //     url:'',/*@url 图片或者视频的url*/
                //     itemTitle:'',/*@description 描述*/
                //     price:'',/*@description 价格*/
                //     buyerNum:'',/*@buyerNum 已购买件数*/
                //     time:0,/*@time时间，当type为2时填写*/
                //     remark:{text:'NO.1',backgroundColor:''},
                //     titleLines:false,
                //     userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                // }
                // }
            },
            opusWorks: {
                // "totalPages": 1,
                // "totalCount": 2,
                // "curPage": 1,
                // "list": [
                //     {
                //         "id": 4,
                //         "userId": 3097,
                //         "userName": "🚀 Lns",
                //         "photoUrl": "https://oss.pg.yibaotong.top/images/user/20191011_offline/30977156321.jpg",
                //         "interactId": 621,
                //         "mediaId": 2821,
                //         "mediaType": 1,
                //         "mediaContents": [
                //             {
                //                 "url": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/a2c3bb0505148c86bb56be6933a41614.webp",
                //                 "size": [
                //                     720.0,
                //                     1552.0
                //                 ]
                //             },
                //             {
                //                 "url": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/b56fd396967423d3e29139aa6d2a36c2.webp",
                //                 "size": [
                //                     120.0,
                //                     120.0
                //                 ]
                //             }
                //         ],
                //         "musicId": 53,
                //         "poster": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/a2c3bb0505148c86bb56be6933a41614.webp",
                //         "mediaComment": "",
                //         "likeNum": 0                                   //----点赞数
                //     },
                // ]
            },
            works: {
                title: "参赛作品",/*@title works 标题*/
                id: 0,
                isShowMore: false,/*@isShowMore 是否显示查看更多*/
                // list{
                // {
                //     storeId:0,
                //     id:0,//商品id
                //     type:1,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                //     itemId:0,//商品id
                //     currency:"￥",/*金币的符号*/
                //     url:'',/*@url 图片或者视频的url*/
                //     itemTitle:'',/*@description 描述*/
                //     price:'',/*@description 价格*/
                //     buyerNum:'',/*@buyerNum 已购买件数*/
                //     time:0,/*@time时间，当type为2时填写*/
                //     remark:{text:'NO.1',backgroundColor:''},
                //     titleLines:false,
                //     userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                // }
                // }
            }
        }
    },
    created () {
        this.systemStyle = this.$route.query && this.$route.query.ttn || 6; //0系统 1os零售 2商城h5 3os渠道 5好看好玩 6好看好玩h5 10珠宝易

        /*载体id 可能是推广id可能是媒体id*/
        if (this.systemStyle == 5) {
            this.carrierId = this.$route.params && this.$route.params.carrierId ? this.$route.params.carrierId : 0;
            this.appraiseId = this.$route.params && this.$route.params.topicId ? this.$route.params.topicId : 0;
        } else {
            this.carrierId = this.appraiseProp && this.appraiseProp.carrierId ? this.appraiseProp.carrierId : 0;
            this.appraiseId = this.appraiseProp && this.appraiseProp.interactId ? this.appraiseProp.interactId : 0;
        }
        console.log(this.appraiseProp)
        // this.carrierId = this.$route.params && this.$route.params.carrierId ? this.$route.params.carrierId : 0;
        // this.appraiseId = this.$route.params && this.$route.params.topicId ? this.$route.params.topicId : 0;
    },
    mounted () {
        this.initPage();
        this.initWorks();
        this.showHideTopIcon('appraise-wshare');
        this.showHideTopIcon('change-work-btn', true);
    },
    methods: {
        initPage () {
            let url = `${this.NW_API_API_LOCALE_VERSION}/interact/detail/${this.userId}/topic/${this.appraiseId}`
            this.xurl.get(url).then((data) => {
                if (data.success) {
                    this.prizeTopic = data.result;

                    // this.prizeTopic.actState = 0;
                    // this.prizeTopic.startTime = 1575289372000;
                    // this.prizeTopic.endTime = 1576844570000;

                    // this.prizeTopic.actState = 1;
                    this.prizeTopic.endTime = 1576844570000;
                    this.prizeTopic.actState = 2;

                    this.prizeTopic.awarded = true;
                    this.prizeTopic.received = false;

                    this.prizeTopic.myReward = {                                                                   //----++20191231++ 我的奖品：注意当奖品是现金红包时,mediaContents里面只有一个红包图片
                        "id": 231,                                            //----获奖记录id
                        "rewardLevel": 3,                                     //----@奖励等级
                        "awardType": 10,                                      //----@奖品类型
                        "awardTitle": "xxd",                                  //----奖品标题
                        "awardNum": 3,                                        //----奖品数量
                        "mediaType": 0,                                       //----多媒体类型：
                        "mediaContents": [                                    //----多媒体内容
                            {
                                "url": "https://oss.haokanhaowan.cn/files/ad_video/20191115_offline/01984361.mp4",
                                "size": [
                                    60.5,
                                    200.0,
                                    16.0
                                ]
                            }
                        ],
                        "poster": "xxxxx"                                    //----海报
                    },

                        this.prizeTopic = Object.assign({}, this.prizeTopic);

                    this.initSwiper();
                    this.initRule();
                    this.initBgSwiper();
                    this.initSelfTopic();
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg })
                } else {
                    this.$root.$emit('toast', { msg: '关注失败' })
                }
            });
        },
        shareOther () {

        },
        getPrizeBtn (obj) {
            /*活动已结束，已经中奖，可以领奖*/
            if (this.systemStyle == 5) {
                /*领取奖励*/
                let url = `${this.NW_API_API_LOCALE_VERSION}/interact/receive/reward/online`;
                this.xurl.postDataJsonLoading(url, params).then(data => {
                    if (data.success) {

                    } else if (data.errMsg) {
                        this.$root.$emit('toast', { msg: data.errMsg });
                    } else {
                        this.$root.$emit('toast', { msg: '获取中间二维码失败' });
                    }
                })
            } else {
                MessageBox({
                    title: '',
                    message: '参赛话题需要录制视频，需在好看好玩内进行',
                    showCancelButton: true,
                    confirmButtonText: '立即下载',
                    cancelButtonText: '我再想想',
                }).then((data) => {
                    if (data == 'confirm') {
                        that.toHaoKanHaoWan();
                    }
                })
                /*不能给他领取奖品，领取他第二次就自己会去店里面了，都不需要下载app*/
                // if(obj.awardType && obj.awardType == 1){//1, "商品",2, "优惠券",3, "红包",10, "活动多媒体"
                //     /*这里默认*/
                //     this.initCode();
                // }else if(obj.awardType && obj.awardType == 3){
                //     this.getRedMsg.show = true;
                // }
            }

            // if(!this.appraise.received){
            //     this.initCode();
            // }else{
            //     this.$root.$emit("toast",{msg:"您已领取奖品"});
            // }
        },
        /*获取码*/
        initCode () {
            let storeId = this.prizeTopic.storeId;
            let url = `${this.NW_API_API_LOCALE_VERSION}/code/get/content`;
            let params = {
                userId: this.userId,
                contentType: 61,
                params: {
                    "userId": this.userId,
                    "actType": 6,                                             //----@活动类型
                    "subActType": 6,                                          //----@子活动类型
                    "actKey": this.appraiseId,                                            //----活动id
                    "storeId": storeId,                                       //----店铺id
                }
            }
            this.xurl.postDataJsonLoading(url, params).then(data => {
                if (data.success) {
                    /*获取店铺信息*/
                    let storeInfoUrl = `${this.NW_API_API_LOCALE_VERSION}/store/simpleStore/${storeId}/info`;
                    this.xurl.getLoading(storeInfoUrl).then((storeInfo) => {
                        if (storeInfo.success) {
                            this.storeInfo = storeInfo.result;
                            let tempObj = {
                                show: true,
                                imgType: 'rqcode',//rqcode
                                code: {
                                    img: '',
                                    url: data.result.content,
                                    width: 230,
                                    height: 230,
                                },
                                btn: `<span style="color: #fff;display: inline-block;font-size: 16px;"><img style="width:20px;position: relative;top: 4px;" src="${this.staticImageUrl('images/appraise/navigation_icon.png')}" alt="">导航</span>`,
                                topText: '',
                                btnTopText: '到店出示二维码领取奖品',
                                conterImg: 'https://r.yibaotong.top/html/v_nw_h5_min/images/app_download_logo.png',
                                copyContent: {
                                    pTitle1: '',
                                    p1Content: storeInfo.result.name,
                                    pTitle2: '',
                                    p2Content: storeInfo.result.location,
                                    text: '复制地址',
                                },
                            }
                            this.appraiseCode = Object.assign({}, this.appraiseCode, tempObj);
                        } else if (data.errMsg) {
                            this.$root.$emit('toast', { msg: data.errMsg });
                        } else {
                            this.$root.$emit('toast', { msg: '获取店铺信息失败' });
                        }
                    })

                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取中间二维码失败' });
                }
            })
        },
        // scrollTop(){
        //     getBanner
        //     $('.prize-topic-box')
        // },
        joinPrize () {
            /*如果不是h5页面*/
            let that = this;
            if (this.systemStyle == 5) {
                if (this.isIphone) {

                } else if (this.isAndroid) {

                }
            } else {
                MessageBox({
                    title: '',
                    message: '参赛话题需要录制视频，需在好看好玩内进行',
                    showCancelButton: true,
                    confirmButtonText: '立即下载',
                    cancelButtonText: '我再想想',
                }).then((data) => {
                    if (data == 'confirm') {
                        that.toHaoKanHaoWan();
                    }
                })
            }
        },
        editWorks () {
            let that = this;
            if (this.systemStyle == 5) {
                if (this.isIphone) {

                } else if (this.isAndroid) {

                }
            } else {
                MessageBox({
                    title: '',
                    message: '下载好看好玩更换作品',
                    showCancelButton: true,
                    confirmButtonText: '立即下载',
                    cancelButtonText: '我再想想',
                }).then((data) => {
                    if (data == 'confirm') {
                        that.toHaoKanHaoWan();
                    }
                })
            }
        },
        titleRightBtn () {
            if (this.systemStyle == 5) {
                if (this.isIphone) {

                } else if (this.isAndroid) {

                }
            } else {
                this.showShare = true
            }
        },
        initWorks (obj) {
            let that = this;
            let pageSize = 10;
            let pageNum = 1;
            let list = [];
            if (obj && obj.curPage) {
                pageNum = obj.curPage + 1;
                list = that.works.list || [];
                if (obj.totalPages && pageNum > obj.totalPages) {
                    return
                }
            }
            let url = `${this.NW_API_API_LOCALE_VERSION}/interact/query/${this.appraiseId}/topic/opus?pageSize=${pageSize}&pageNum=${pageNum}`
            this.xurl.get(url).then((data) => {
                if (data.success) {
                    let tempList = {
                        list: list,
                        titleType: "",/*@title goodsBoxs 标题*/
                        title: "参赛作品",/*@title works 标题*/
                        isShowMore: false,/*@isShowMore 是否显示查看更多*/
                        totalCount: data.totalCount,
                        totalPages: data.totalPages,
                        curPage: data.curPage,
                    };
                    let temp = {};
                    data.list.forEach((value, index) => {
                        temp = {};
                        let style = that.styleFn(index);
                        temp = {
                            storeId: value.userId,
                            type: 3,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                            itemId: value.mediaId,//商品id
                            currency: "￥",/*金币的符号*/
                            url: value.mediaContents[0].url,/*@url 图片或者视频的url*/
                            itemTitle: '',/*@description 描述*/
                            price: '',/*@description 价格*/
                            buyerNum: '',/*@buyerNum 已购买件数*/
                            time: 0,/*@time时间，当type为2时填写*/
                            remark: { text: style.text, backgroundColor: style.backgourndColor },
                            userInfo: {
                                header: value.photoUrl,
                                name: value.userName,
                                like: false,
                                num: value.likeNum,
                                url: '',
                                selectUrl: 'http://192.168.1.127/html/v_nw_h5_min//images/look/love_collection_active.png',
                                notSelectUrl: 'http://192.168.1.127/html/v_nw_h5_min//images/look/love_collection.png'
                            },
                            id: 0,
                        }
                        tempList.list.push(temp);
                    })
                    // this.works = {list:[]};
                    this.works = Object.assign({}, this.works, tempList);
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg })
                } else {
                    this.$root.$emit('toast', { msg: '关注失败' })
                }
            });
        },
        refresh () {
            setTimeout(() => {
                this.works.curPage = 1;
                this.initPage();
                this.initWorks();
                this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
            }, 500)
        },
        infinite () {
            this.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
            setTimeout(() => {
                this.initPage();
                this.initWorks(this.works);
                this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
            }, 500)
        },
        swiperIndex (index) {
            this.showSwiperPrizeStep = index;
            //关闭掉视频播放

        },
        styleFn (index) {
            switch (index) {
                case 0: return { backgourndColor: '#F57145', text: 'NO.1' }; break;
                case 1: return { backgourndColor: '#F59D45', text: 'NO.2' }; break;
                case 2: return { backgourndColor: '#F5C945', text: 'NO.3' }; break;
                default: return { backgourndColor: 'rgba(0,0,0,.2)', text: index + 1 }; break;
            }
        },
        initSelfTopic () {
            let that = this;
            // if(!this.prizeTopic.myReward){
            //     return;
            // }
            // let value = this.prizeTopic.selfTopicOpus;
            let value = {                                                              //----本人作品
                "id": 4,
                "userId": 3097,
                "userName": "🚀 Lns",
                "photoUrl": "https://oss.pg.yibaotong.top/images/user/20191011_offline/30977156321.jpg",
                "interactId": 621,
                "mediaId": 2821,
                "mediaType": 1,
                "mediaContents": [
                    {
                        "url": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/a2c3bb0505148c86bb56be6933a41614.webp",
                        "size": [
                            720.0,
                            1552.0
                        ]
                    },
                    {
                        "url": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/b56fd396967423d3e29139aa6d2a36c2.webp",
                        "size": [
                            120.0,
                            120.0
                        ]
                    }
                ],
                "musicId": 53,
                "poster": "https://oss.haokanhaowan.cn/images/look/2019102419_dev/a2c3bb0505148c86bb56be6933a41614.webp",
                "mediaComment": "",
                "likeNum": 0,                                  //----点赞数
                "rankNum": 123,                                //----排名
            };
            if (value) {
                let style = that.styleFn(0);
                let tempObjList = {
                    list: [],
                };
                let tempObj = {
                    storeId: value.userId,
                    type: 3,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                    itemId: value.mediaId,//商品id
                    currency: "￥",/*金币的符号*/
                    url: value.mediaContents[0].url,/*@url 图片或者视频的url*/
                    itemTitle: '',/*@description 描述*/
                    price: '',/*@description 价格*/
                    buyerNum: '',/*@buyerNum 已购买件数*/
                    time: 0,/*@time时间，当type为2时填写*/
                    remark: { text: style.text, backgroundColor: style.backgourndColor },
                    userInfo: {
                        header: value.photoUrl,
                        name: value.userName,
                        like: false,
                        num: value.likeNum,
                        url: '',
                        selectUrl: 'http://192.168.1.127/html/v_nw_h5_min//images/look/love_collection_active.png',
                        notSelectUrl: 'http://192.168.1.127/html/v_nw_h5_min//images/look/love_collection.png'
                    },
                    id: 1,
                };
                tempObjList.list.push(tempObj);
                let rightText = '请朋友点赞'
                if (this.prizeTopic.actState == 2 && this.prizeTopic.awarded) {
                    rightText = '炫耀一下'
                } else if (this.prizeTopic.actState == 2 && !this.prizeTopic.awarded) {
                    rightText = '分享作品'
                }
                let leftText = ''
                if (this.prizeTopic.rankNum == 0 && this.prizeTopic.shortToAdvanced) {
                    leftText = `下一名只差${this.prizeTopic.shortToAdvanced}颗红星就超过你了 <img style='width: .12rem' src='http://192.168.1.127/html/v_nw_h5_min//images/look/love_collection_active.png' />`
                } else if (this.prizeTopic.shortToAdvanced) {
                    leftText = `离上一名仅差${this.prizeTopic.shortToAdvanced}颗 <img style='width: .12rem' src='http://192.168.1.127/html/v_nw_h5_min//images/look/love_collection_active.png' />`
                }
                let tempSelfWorkL = {
                    titleInfo: {
                        type: "oneLine",
                        leftText: leftText,
                        rightText: rightText,
                    }
                }
                this.selfWorks = Object.assign({}, this.selfWorks, tempSelfWorkL, tempObjList);
            }
        },
        showBigSiper (imgInfo) {
            let that = this;
            let tempObj = [];
            if (imgInfo.mediaType == 1) {
                that.prizeTopic.rewardRule.mediaRewards.forEach((answerValue, index) => {
                    if (answerValue.mediaContents && answerValue.mediaContents.length > 0 && imgInfo.index == index) {
                        answerValue.mediaContents.forEach((value, index) => {
                            tempObj.push(value.url);
                        });
                        that.bigSwiperList = tempObj;
                        that.swiperShow = true;
                        document.body.className = 'ovfHiden';
                        document.documentElement.className = 'ovfHiden';
                    }
                });
            }
        },
        hideBigSiper () {
            this.swiperShow = false;
            document.body.className = '';
            document.documentElement.className = '';
        },
        doLike (obj) {
            let that = this;
            let url = ''
            if (obj.id == 0) {
                this.works.list.forEach((value, index) => {
                    if (obj.itemId == value.itemId) {
                        if (!obj.userInfo.like) {
                            that.works.list[index].userInfo.like = true;
                            that.works.list[index].userInfo.num++;
                        } else {
                            that.works.list[index].userInfo.like = false;
                            that.works.list[index].userInfo.num--;
                        }
                    }
                });
                that.works.list.splice(0, 1, that.works.list[0]);

            } else if (obj.id == 1) {
                this.selfWorks.list.forEach((value, index) => {
                    if (obj.itemId == value.itemId) {
                        if (!obj.userInfo.like) {
                            that.selfWorks.list[index].userInfo.like = true;
                            that.selfWorks.list[index].userInfo.num++;
                        } else {
                            that.selfWorks.list[index].userInfo.like = false;
                            that.selfWorks.list[index].userInfo.num--;
                        }
                    }
                });
                that.selfWorks.list.splice(0, 1, that.selfWorks.list[0]);
            }
            let likeType = 0;//0-主评论  1-子评论  2-店铺官网媒体   3-店铺商品  4-店铺活动  5-买家秀  6-大师  10-用户多媒体信息
            if (obj.userInfo.like) {
                url = `${this.NW_API_API_LOCALE_VERSION}/like/user/${this.userId}/do?likeType=${likeType}&&likeKey=${obj.itemId}`
            } else {
                url = `${this.NW_API_API_LOCALE_VERSION}/like/user/${this.userId}/cancel?likeType=${likeType}&&likeKey=${obj.itemId}`
            }
            this.xurl.put(url).then((data) => {
                if (data.success) { } else {
                    console.log("点赞失败")
                }
            })
        },
        ruleShow () {
            this.rule.show = true;
        },
        /*导航接口*/
        navagation () {
            let navagationObj = {
                latitude: this.storeInfo.latitude,   //经度
                longitude: this.storeInfo.longitude,    //纬度
                storeName: this.storeInfo.location,   //店铺名称
            }
            if (this.systemStyle == 5) {
                if (this.isAndroid && window.htmlInteracAndroid) {
                    window.htmlInteracAndroid.goToNavigation(JSON.stringify(navagationObj));
                } else if (this.isIphone && window.webkit) {
                    window.webkit.messageHandlers.h5GotoMapNav.postMessage(JSON.stringify(navagationObj));
                }
            }
        },
        initRule () {
            /*'玩家输入数字即可参与估价活动，确认要估的数字后不可修改<br />' +
                    '2.每成功分享给一个好友可增加一次估价机会，分享人数不限<br />' +
                    '3.所估数字最接近所有人估算的平均数（去掉10%最高数和10%最低数）的用户，则获得奖品。若同时出现多位，则按时间计算最先估价的用户获胜。\n',*/
            this.ruleMsg = {
                isNeedBtn: false,
                title: `<img style="width: .16rem;margin-right: .1rem;" src="${this.staticImageUrl('images/prizeTopic/rule_left_icon.png')}" alt="">活动规则<img style="width: .16rem;margin-left: .1rem;" src="${this.staticImageUrl('images/prizeTopic/rule_right_icon.png')}" alt="">`,
                rule: this.prizeTopic.rule,
                addPoint: false,
                isScorll: true,
                closeBtnImg: `${this.staticImageUrl('images/prizeTopic/close_bgtransp.png')}`
            };
            this.ruleMsg = Object.assign({}, this.ruleMsg)
        },
        /*显示估价的详情弹框*/
        appraiseShowFn () {
            this.prizeTopicShow = true;
            setTimeout(() => {
                if (this.$refs.topicBox) {
                    this.$refs.topicBox.showSlideBottom();
                }
            }, 50)
        },
        initBgSwiper () {
            this.videoSwiperPanorama = {
                videoSwiperPanoramaPorps: {
                    mediaType: this.prizeTopic.mediaType,/*0视屏,1图片,2全景图*/
                    imagesList: [],
                    videoUrl: this.prizeTopic.mediaContents[0].url,
                    imgUrl: this.prizeTopic.mediaContents[0].url,
                }
            }
        },
        /*初始化swiper组件信息*/
        initSwiper () {
            let that = this;
            let tempObj = {};
            that.swiperContent.list = [];
            if (that.prizeTopic.rewardRule && that.prizeTopic.rewardRule.mediaRewards && that.prizeTopic.rewardRule.mediaRewards.length > 0) {
                that.prizeTopic.rewardRule.mediaRewards.forEach((answerValue, index) => {
                    if (answerValue.mediaContents && answerValue.mediaContents.length > 0) {
                        console.log(answerValue.awardTitle)
                        tempObj = {
                            mediaType: answerValue.mediaType,
                            url: answerValue.mediaContents[0].url,
                            mark: that.prizeStep(answerValue.rewardLevel),
                            poster: answerValue.poster,
                            title: answerValue.awardTitle,
                            index: index,
                        };
                        that.swiperContent.list.push(tempObj);
                    }
                });
            }
        },
        /*导航*/
        navagation () {
            let navagationObj = {
                latitude: this.storeInfo.latitude,   //经度
                longitude: this.storeInfo.longitude,    //纬度
                storeName: this.storeInfo.location,   //店铺名称
            }
            if (this.systemStyle == 5) {
                if (this.isAndroid && window.htmlInteracAndroid) {
                    window.htmlInteracAndroid.goToNavigation(JSON.stringify(navagationObj));
                } else if (this.isIphone && window.webkit) {
                    window.webkit.messageHandlers.h5GotoMapNav.postMessage(JSON.stringify(navagationObj));
                }
            }
        },
        openRedPage (obj, callback) {
            if (this.systemStyle != 5) {
                if (!this.userId) {
                    this.$router.push('/to/login');
                    return
                }
                let temp = {
                    myPacketInfo: {
                    }
                };
                // this.$refs.getRedAlert.redShow = false;
                // this.$refs.getRedAlert.isHideRed = true;
                temp.myPacketInfo.canReceive = false;
                temp.myPacketInfo.receivedAmount = 100;
                temp.myPacketInfo.showReceivedAmount = true;
                if (callback) {
                    callback();
                }
                this.getRedMsg = Object.assign({}, this.getRedMsg, temp);
            } else {
                if (this.isIphone) {

                } else if (this.isAndroid) {

                }
            }

            // let url = `${this.NW_API_API_LOCALE_VERSION}/welfare/packet/${this.welPacketId}/receive`;
            // let temp = {};
            // this.putLoading(url).then((data) => {
            //     if (data.success) {
            //         let temp = {};
            //         temp.getMoney = data.result;
            //         this.$refs.getRedAlert.redShow = false;
            //         this.$refs.getRedAlert.isHideRed = true;
            //         temp.hasSelfPackage = true;
            //         this.getPageMsg()
            //         this.getRedMsg = Object.assign({}, this.getRedMsg, temp);
            //     } else if (data.errMsg) {
            //         this.$root.$emit('toast', {msg: data.errMsg});
            //     } else {
            //         this.$root.$emit('toast', {msg: '红包领取失败'});
            //     }
            // });
        },
        /*回到顶部*/
        appraiseToTop () {
            // let dom = document.getElementsByClassName('slide-bottom-transition')[0];
            let dom = document.getElementsByClassName('prize-topic-box')[0];
            let tempObj = {
                dom: dom
            };
            this.toTop(tempObj)
        },
        /*上下滑动影藏显示的处理*/
        showHideTopIcon (hideDomClassName, needHide) {
            setTimeout(() => {
                let dom = document.getElementsByClassName('prize-topic-box')[0]
                let hideDom = '';
                if (document.getElementsByClassName(hideDomClassName)) {
                    hideDom = document.getElementsByClassName(hideDomClassName)[0]
                }
                if (hideDom) {
                    this.slideShowHide({ dom, hideDom, needHide });
                }
            }, 2000);
        }
    },
    components: {
        /*这种引入方式一般是因为有视频，或者音频，需要自动播放*/
        'swiper-center-big': SwiperCenterBig,
        'goods-box': GoodsBox,
        'act-rule': () => import('../../../components/commonComponents/rule/RuleModule1.vue'),
        'full-height-swiper': () => import('../../../components/commonComponents/swiperComponent/FullHeightSwiper.vue'),
        'topic-header': () => import('./components/Header.vue'),
        'video-swiper-panorama': () => import('./components/VideoSwiperPanorama.vue'),
        'slide-bottom': () => import('../../../components/commonComponents/slideBottom/SlideBottom'),
        'login-verify': () => import('../../../components/commonActModel/loginVerify/LoginVerifyCircle'),
        "v-share": () => import("../../../components/commonComponents/share/Share"),
        'static-img-alert': () => import('../../../components/commonComponents/alert/staticImgAlert'),
        "no-data": () => import("../../../components/commonActModel/noData/NoData"),
        "red-packet": () => import("../../../pages/amusing/components/GetRedAlert"),
        /*src/pages/amusing/components/GetRedAlert.vue*/
        // 'wx-share-body': () => import('../../../components/wx/WxShareBody'),
    },
}
</script>

<style scoped lang="scss">
.pirze-topic {
    padding: 0.16rem;
}
.swiper-center-wbig {
    padding-top: 0.44rem;
}
.join-icon {
    width: 0.19rem;
    position: relative;
    top: -2px;
    vertical-align: middle;
}
.join-wrap {
    position: fixed;
    bottom: 0.16rem;
    left: 0;
    z-index: 1060;
    right: 0;
    margin: auto;
}
.join-btn {
    display: inline-block;
    border-radius: 0.25rem;
    padding: 0.1rem 0.18rem;
    background-image: linear-gradient(to right, #f7ce45, #fbe94e);
    color: #313233;
    font-size: 0.16rem;
    font-weight: bold;
}
.goods-wbox /deep/ {
    .bus-show-title {
        margin-bottom: 0.2rem;
        font-size: 0.16rem;
        color: #313233;
        padding-bottom: 0.15rem;
        height: auto;
        border-bottom: 1px solid #f0f0f0;
    }
    .buy-item-wrap {
        width: 1.65rem;
        margin-bottom: 0.1rem;
    }
}
.already-finish /deep/ {
    .firend-help-btn {
        font-size: 0.14rem;
        border-radius: 0.25rem;
        background-color: #fff;
        border: 1px solid #626366;
        color: #313233;
    }
}
.swiper-center-wbig /deep/ {
    .swiper-center-big {
        width: 2rem;
        height: 2.5rem;
        background-color: transparent;
    }

    .swiper-container {
        overflow: unset;
    }

    .swiper-container {
        height: 2.5rem;
    }

    .swiper-slide {
        border-radius: 0.03rem;
        width: 1.85rem !important;
        height: 2.35rem;

        .img-wrap {
            overflow: hidden;
            padding: 0.1rem;
            border-radius: 0.1rem;
            /*background-color: transparent;*/
            .booking-item-top-img {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .item-mark {
            top: 0.1rem;
            left: 0.22rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0.05rem;
            border-bottom-right-radius: 0.05rem;
            border-top-right-radius: 0;
            min-width: 0.44rem;
            text-align: center;
            line-height: 0.24rem;
        }
    }
    .myVideo {
        max-height: 100%;
    }
}
.appraise-rule /deep/ {
    .com_black {
        z-index: 1060;
    }
    .circle-rule-position {
        z-index: 1061;
    }
    .sure-start-prize {
        width: 2.92rem;
        padding: 0;
    }
    .rule-title {
        border-top-left-radius: 0.1rem;
        border-top-right-radius: 0.1rem;
        color: #996600;
        font-size: 0.18rem;
        background-image: linear-gradient(to right, #f7ce45, #fbe94e);
    }
    .rule-content-scroll {
        height: 2.85rem;
        line-height: 0.3rem;
        font-size: 0.16rem;
        color: #313233;
    }
    #ruleContent {
        padding: 0.2rem 0.18rem 0.4rem;
    }
}
.appraise-rule {
    .module-bord-content {
        top: -3.335rem;
        top: -50vh;
    }
}
.prize-topic .full-height-swiper-wrap {
    width: 6.67rem;
    width: 100vw;
    height: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1060;
}
.prize-topic /deep/ {
    .video-components {
        position: relative;
    }
    .appraise-title {
        background-color: #fff;
        font-size: 0.16rem;
        color: #313233;
    }
}
.prize-topic .full-height-swiper-wrap /deep/ {
    .swiper-slide {
        height: 100%;
    }
    .self-swiper-pagination {
        width: 0.6rem;
        text-align: center;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0.2rem;
        margin: auto;
    }
}
.self-goods-wbox /deep/ {
    .buy-item-wrap {
        width: 2.4rem;
        height: 3.4rem;
    }
    .box-item {
        margin-top: 0.2rem;
        justify-content: center;
    }
}
.share-box /deep/ {
    .share-bord-warp {
        z-index: 1062;
    }
    .com_black {
        z-index: 1061;
    }
}
.discription-img {
    position: absolute;
    bottom: 0.4rem;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    font-size: 0.15rem;
    color: #313233;
}
.prize-mark {
    width: 1.6rem;
    position: absolute;
    left: 0;
    right: 0;
    top: -0.2rem;
    margin: auto;
}
.prize-wmark {
    width: 3.43rem;
    height: 3.26rem;
    text-align: center;
    background-color: #fbf7e4;
    -webkit-border-radius: 0.08rem;
    -moz-border-radius: 0.08rem;
    border-radius: 0.08rem;
    margin-top: 0.55rem;
}
.prize-mark-text {
    position: absolute;
    left: -0.8rem;
    right: 0;
    margin: auto;
    top: 0.4rem;
    width: 0.44rem;
    height: 0.2rem;
    font-size: 0.12rem;
    line-height: 0.2rem;
    color: #905c1e;
    text-align: center;
    background-color: #fbe94e;
    border-bottom-left-radius: 0.08rem;
    border-bottom-right-radius: 0.08rem;
}
.prize-inform {
    font-size: 0.16rem;
    color: #d94c4c;
    padding: 0 0.38rem;
    text-align: center;
}
.get-prize-wbtn {
    padding-top: 0.2rem;
    text-align: center;
}
.get-prize-btn {
    display: inline-block;
    font-size: 0.16rem;
    color: #313233;
    padding: 0 0.2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    text-align: center;
    border-radius: 0.25rem;
    background-image: linear-gradient(to right, #f7ce45, #fbe94e);
}
.get-prize-btn.disabled {
    background-image: none;
    background-color: #ebeef5;
    color: #c4c6cc;
}
.prize-wimg {
    padding-top: 0.4rem;
}
.prize-img {
    width: 1.64rem;
    height: 2.2rem;
    object-fit: contain;
}
.static-img-alert-wrap /deep/ {
    .module-bord-content {
        width: 2.9rem !important;
    }
    .static-code {
        padding: 0.05rem;
        background-color: #f5f5f5;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        width: 240px;
        height: 240px;
    }
    .com_black {
        z-index: 1060;
    }
    .module-bord-position {
        z-index: 1061;
    }
    .copy-wbtn {
        padding-left: 0;
    }
    .rq-btn {
        background-color: #6789e1;
    }
    .btn-top-text {
        color: #ff4242;
        font-size: 0.14rem;
    }
    .copy-adress {
        padding-top: 0;
    }
    .btn-top-text {
        padding-top: 0.1rem;
    }
    .rq-btn {
        margin-top: 0.05rem;
    }
}
.appraise-wshare {
    position: fixed;
    right: 0.16rem;
    bottom: 1.2rem;
    z-index: 1060;
    width: 0.32rem;
}
.appraise-top {
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    margin-top: 0.24rem;
    img {
        width: 100%;
    }
}
.prize-topic-box {
    position: relative;
    overflow: auto;
    padding-bottom: 0.5rem;
}
.red-packet /deep/ {
    .get-red-packeget {
        z-index: 1061;
    }
    .com_black {
        z-index: 1060;
    }
}
</style>